<template>
  <div class="article">
    <div class="top_box">
      <div class="left_box">
        <el-scrollbar :always="false">
          <div class="scrollbar-flex-content">
            <p
              v-for="(item, index) in data.articleCats"
              :key="index"
              class="scrollbar-demo-item"
            >
              <span
                @click="selectSpan(item.id)"
                v-if="item.showInNav"
                :style="{
                  color: item.id == data.selectedId ? 'red' : 'black',
                }"
                >{{ item.catName }}</span
              >
            </p>
          </div>
        </el-scrollbar>
      </div>
      <div class="right_box">
        <el-button type="primary" :icon="Menu" @click="data.drawer = true" />
      </div>
    </div>

    <el-divider />
    <el-drawer
      v-model="data.drawer"
      title="选择分类"
      direction="ttb"
      :before-close="handleClose"
    >
      <div class="el-drawer-flex-content">
        <div
          v-for="(item, index) in data.articleCats"
          :key="index"
          class="el-drawer-item"
        >
          <p
            v-if="item.showInNav"
            :style="{
              color: item.id == data.selectedId ? 'red' : 'black',
            }"
            @click="selectSpan(item.id)"
          >
            {{ item.catName }}
          </p>
        </div>
      </div>
    </el-drawer>

    <L_ArticleListItem
      :articles="data.articles"
      :showCard="data.showCard"
      @getArticleDetail="getArticleDetail"
    ></L_ArticleListItem>
    <div class="bottom_box">
      <van-tabbar v-model="data.active">
        <van-tabbar-item to="/article/1" icon="home-o">文章</van-tabbar-item>
        <van-tabbar-item to="/userinfo" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ElIcon, ElDivider } from "element-plus";
import { Menu } from "@element-plus/icons-vue";
import { onMounted, reactive, watch } from "vue";

import { getArticleById, getArticleCatAll } from "@/http/article.js";
import { getUserInfoById } from "@/http/user";
import L_ArticleListItem from "@/components/L-ArticleListItem.vue";

import { useRouter, useRoute } from "vue-router";

// 2. 调用useRouter函数
const router = useRouter();
const route = useRoute();

const data = reactive({
  articleCats: [],
  articles: [],
  drawer: false,
  selectedId: route.params.id,
  showCard: true,
  active: 0,
});

/**
 * 根据文章id获取文章详情
 * @param {*} id
 */
const getArticleDetail = (id) => {
  console.log(id);
  router.push({ path: "/articleDetail", query: { id: id } });
};

/**
 * 获取所有文章分类
 */
const articleCats = () => {
  getArticleCatAll().then((res) => {
    // console.log(res);
    data.articleCats = res.data.articleCats;
    // console.log(data.articleCats);
  });
};

const handleClose = () => {
  data.drawer = false;
};

/**
 * 根据分类id获取文章
 * @param {*} cateId
 */
const selectSpan = (cateId) => {
  console.log(cateId);
  data.selectedId = cateId;
  data.drawer = false;
  const that = data;
  getArticleById(cateId)
    .then((res) => {
      //   console.log(res);
      if (res.code == 1) {
        data.showCard = true;
        data.articles = res.data.articles;
        data.articles.forEach((item) => {
          getUserInfoById(item.userinfoId)
            .then((res) => {
              // item.userinfoId = res.data.userInfo.userName
              item.userinfoId = res.data.userinfo.userName;
              item.createTime = formatDate(item.createTime);
            })
            .catch((err) => {
              console.log(err);
            });
        });
      } else {
        data.showCard = false;
        // console.log(res.msg);
      }
      router.push({
        path: "/article/" + cateId,
      });
    })
    .catch((err) => {
      console.log(err);
    });
};

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are 0 based hence the +1
  const day = ("0" + date.getDate()).slice(-2);
  const hours = ("0" + date.getHours()).slice(-2);
  const minutes = ("0" + date.getMinutes()).slice(-2);
  const seconds = ("0" + date.getSeconds()).slice(-2);
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

onMounted(() => {
  if (!localStorage.getItem("user_info")) {
    router.push("/login");
  }
  articleCats();
  selectSpan(route.params.id);
});
</script>

<style scoped>
.article {
  padding-top: 80px;
  padding-bottom: 80px;
}
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #f5f5f6;
}
.top_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #4b26a0;
  z-index: 9999;
}

.top_box .left_box {
  width: 86%;
}

.top_box .right_box {
  width: 14%;
  text-align: center;
}
:deep .el-divider--horizontal {
  margin: 0;
}
.el-drawer-flex-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-drawer-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(143, 153, 168, 0.3);
  color: #1e1b1b;
  width: 90px;
  height: 50px;
  margin: 10px;
  text-align: center;
}
:deep .el-drawer__body {
  padding: 0 1rem;
}

:deep .el-scrollbar__bar.is-horizontal {
  display: none;
}

:deep .el-drawer.ttb {
  top: 70px;
}
</style>